<div>
    <div class="row">
        <div class="col-md-5">
            <utk-barchart chart-data="data" chart-colors="colors" chart-width="{{chart.width}}" chart-height="{{chart.height}}" chart-margin="{{chart.margin}}"
                chart-axis-color="{{chart.axisColor}}" chart-axis-text-color="{{chart.axisTextColor}}" chart-display-value="{{chart.displayValue}}"
                chart-x-skip="{{chart.xSkip}}" chart-x-text="{{chart.xText}}" chart-y-text="{{chart.yText}}" chart-group-text="groupText" chart-tip-text="tipText(tip)"
                chart-show-tip="{{chart.showTip}}" chart-legend="{{chart.legend}}">
                <div class="chart_tip"></div>
            </utk-barchart>
        </div>
        <div class="col-md-7">
            <table class="table">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data:</td>
                        <td><utk-button btn-text="Generate" btn-size="xsmall" ng-click="generate()"></utk-button></td>
                    </tr>                    
                    <tr>
                        <td>Size:</td>
                        <td>Width: <input type="text" ng-model="chart.width"></input> Height: <input type="text" ng-model="chart.height"></input> Margin: <input type="text" ng-model="chart.margin"></input></td>
                    </tr>
                    <tr>
                        <td>Text:</td>
                        <td>X-Text: <input type="text" ng-model="chart.xText"></input> Y-Text: <input type="text" ng-model="chart.yText"></input></td>
                    </tr>
                    <tr>
                        <td>Axis (Text) Color:</td>
                        <td>Axis: <utk-label lbl-text="{{chart.axisColor}}"></utk-label> Axis-Text: <utk-label lbl-text="{{chart.axisTextColor}}"></utk-label></td>
                    </tr>
                    <tr>
                        <td>Show Tip Text:</td>
                        <td><utk-checkbox chk-text="Show Tip" ng-model="chart.showTip"></utk-checkbox></td>
                    </tr>
                    <tr>
                        <td>Draw Legend:</td>
                        <td><utk-checkbox chk-text="Legend" ng-model="chart.legend"></utk-checkbox></td>
                    </tr>
                    <tr>
                        <td>Display Value:</td>
                        <td><utk-checkbox chk-text="Display Value" ng-model="chart.displayValue"></utk-checkbox></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>Syntax:</h3>
    <utk-tab-set>
        <utk-tab tab-header="HTML">
            <utk-code cd-lang="html" class="selectable">&lt;utk-barchart chart-data="data" 
    chart-colors="colors" 
    chart-width="{{chart.width}}" 
    chart-height="{{chart.height}}"
    chart-margin="{{chart.margin}}"
    chart-x-text="{{chart.xText}}" 
    chart-y-text="{{chart.yText}}"
    chart-display-value="{{chart.displayValue}}"
    chart-axis-color="{{chart.axisColor}}"
    chart-axis-text-color="{{chart.axisTextColor}}"
    chart-group-text="groupText"
    chart-legend="{{chart.legend}}"
    chart-show-tip="{{chart.showTip}}"
    chart-tip-text="tipText(tip)"
    chart-click="click(data, index)"&gt;
    &lt;div class="chart_tip"&gt;&lt;/div&gt;
&lt;/utk-barchart&gt;</utk-code>
        </utk-tab>
        <utk-tab tab-header="JavaScript">
            <utk-code cd-lang="js" class="selectable">function Ctrl($scope) {
    $scope.data = { "20140723": [10, 7, 4], "20140724": [10, 12, 1], "20140725": [7, 3, 3], "20140726": [1, 5, 5]};
    $scope.groupText = ['USD', 'EUR', 'CNY'];
    
    $scope.tipText = function(tip){
        tip.element.text(tip.data + " [" + $scope.groupText[tip.index%$scope.group] + "] at Day " + Math.floor(tip.index / $scope.group));
    };
    
    //$scope.colors = [['#F9A006', '#D97E00'], ... ];
    //Other code...
}</utk-code>
        </utk-tab>
    </utk-tab-set>
</div>
